<template>
  <el-dialog title="字段控制" :visible.sync="isShow" width="98%" @close="close">
    <el-form :inline="true" style="margin:10px 0">
      <el-button @click="operateAction" type="primary" plain size="small">同步字段</el-button>
    </el-form>
    <el-tabs type="border-card" v-model="tabName" @tab-click="handleTabClick">
      <el-tab-pane label="列表" name="fieldList">
        <field-list ref="fieldList" :formId="form.id"></field-list>
      </el-tab-pane>
      <el-tab-pane label="表单" name="fieldForm">
        <field-form ref="fieldForm" :formId="form.id"></field-form>
      </el-tab-pane>
      <el-tab-pane label="查询" name="filter">
        <filter-view ref="filterView" :formId="form.id"></filter-view>
      </el-tab-pane>
      <el-tab-pane label="导入" name="fieldImport">
        <field-import ref="fieldImport" :formId="form.id"></field-import>
      </el-tab-pane>
      <el-tab-pane label="导出" name="fieldExport">
        <field-export ref="fieldExport" :formId="form.id"></field-export>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>


<script>
import { operateActionPost } from '@/api/interface/operate.js'
import { getFieldByForm, updateField } from "@/api/interface/field.js"
import fieldForm from '@/views/interface/form/components/fieldForm'
import fieldList from '@/views/interface/form/components/fieldList'
import filterView from '@/views/interface/form/components/filterView'
import fieldImport from '@/views/interface/form/components/fieldImport'
import fieldExport from '@/views/interface/form/components/fieldExport'
import Sortable from 'sortablejs'
import draggable from 'vuedraggable'
export default {
  components: {draggable, fieldForm, fieldList, filterView, fieldImport, fieldExport},
  props: {
    form: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
        isShow: false,
        tabName: 'fieldList',
        // form: {},
        itemList: [],
    }
  },
  created(){
  },
  watch: {
    form: {
      immediate: true,
      deep: true,
      handler(val){
        console.log('监听form', val)
        
      }
    },
  },
  mounted(){
  },
  methods:{
    show(){
      this.isShow = true
    },
    close(){
        this.isShow = false
    },
    getFieldByForm(){
      getFieldByForm({
        formId: this.form.id
      }).then(res=>{
        if(res.data.code==10000){
          this.itemList = res.data.data.list
        }
      })
    },
    handleTabClick(e){
      switch (e.name) {
        case 'fieldForm':
          break;
        case 'fieldList':
          break;
        default:
          break;
      }
    },
    //同步字段
    operateAction(){
      operateActionPost('/api/interface/form/synField/', {
        formId: this.form.id
      }).then((res) => {
        if (res.data.code == 10000) {
          this.$refs.fieldForm.getFieldByForm();
          this.$refs.fieldList.getFieldByForm();
          this.$refs.fieldImport.getFieldByForm();
          this.$refs.fieldExport.getFieldByForm();
          this.$refs.filterView.getFieldByForm();
          this.$message({
            message: "同步成功",
            type: "success",
          });
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>

</style>>
